<template>
  <div>
    <!-- 页面标题 -->
    <div class="title">
      <h2>库存分析</h2>
      <p>查看药品库存数据与占比</p>
    </div>

    <!-- 饼状图容器 -->
    <div class="container">
      <div ref="pipeChart" class="chart" />
    </div>

    <!-- 柱状图容器 -->
    <div class="container">
      <div ref="barChart" class="chart" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue'
import { loadProductBarChartDataApi, loadProductPipeChartDataApi } from "@/utils/API/orders/graph";
import * as echarts from 'echarts'

const data = reactive({
  pipeChartDataList: [],
  pipeChartValueList: [],
  barChartDataList: [],
  barChartValueList: [],
})

const loadPipeChartData = () => {
  loadProductPipeChartDataApi().then(res => {
    if (res.code === '200') {
      data.pipeChartDataList = res.data.map(v => v.productName)
      data.pipeChartValueList = res.data.map(v => v.currentStock)
      nextTick(() => {
        renderPipeChart()
      })
    } else {
      data.pipeChartDataList = []
      data.pipeChartValueList = []
      nextTick(() => {
        renderPipeChart()
      })
    }
  }).catch(error => {
    console.error('加载饼状图数据失败:', error)
    data.pipeChartDataList = []
    data.pipeChartValueList = []
    nextTick(() => {
      renderPipeChart()
    })
  })
}

const loadBarChartData = () => {
  loadProductBarChartDataApi().then(res => {
    if (res.code === '200') {
      data.barChartDataList = res.data.map(v => v.category)
      data.barChartValueList = res.data.map(v => v.currentStock)
      nextTick(() => {
        renderBarChart()
      })
    } else {
      data.barChartDataList = []
      data.barChartValueList = []
      nextTick(() => {
        renderBarChart()
      })
    }
  }).catch(error => {
    console.error('加载柱状图数据失败:', error)
    data.barChartDataList = []
    data.barChartValueList = []
    nextTick(() => {
      renderBarChart()
    })
  })
}

const pipeChart = ref(null)
let pipeChartInstance = null
const renderPipeChart = () => {
  if (!pipeChart.value) return
  if (!pipeChartInstance) pipeChartInstance = echarts.init(pipeChart.value)

  pipeChartInstance.setOption({
    title: {
      text: '药品库存量占比',
      left: 'center',
      textStyle: { fontSize: 18, fontWeight: 'bold', color: '#333' },
    },
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      name: '销量',
      type: 'pie',
      radius: '60%',
      data: data.pipeChartDataList.map((name, index) => ({
        name,
        value: data.pipeChartValueList[index],
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    }],
  })
}

const barChart = ref(null)
let barChartInstance = null
const renderBarChart = () => {
  if (!barChart.value) return
  if (!barChartInstance) barChartInstance = echarts.init(barChart.value)

  barChartInstance.setOption({
    title: {
      text: '药品库存量',
      left: 'center',
      textStyle: { fontSize: 18, fontWeight: 'bold', color: '#333' },
    },
    tooltip: { trigger: 'axis', formatter: '{b}: {c}' },
    xAxis: {
      type: 'category',
      data: data.barChartDataList,
      axisLine: { lineStyle: { color: '#ccc' } },  // 设置 x 轴线颜色
      axisLabel: { color: '#333' },  // 设置 x 轴刻度颜色
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#ccc' } },  // 设置 y 轴线颜色
      axisLabel: { formatter: '{value} 件', color: '#333' },  // 设置 y 轴刻度颜色
    },
    series: [{
      name: '库存量',
      type: 'bar',
      data: data.barChartValueList,
      itemStyle: {
        color: '#4E9C88',  // 柱状图颜色
      },
    }],
  })
}

onMounted(() => {
  nextTick(() => {
    loadPipeChartData()
    loadBarChartData()
  })
})
</script>

<style scoped>
/* 页面标题样式 */
.title {
  text-align: center;
  margin-bottom: 30px;
}

.title h2 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.title p {
  font-size: 18px;
  color: #666;
}

/* 图表容器 */
.container {
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;

}

.chart {
  width: 100%;
  height: 500px;
}
</style>
